<html ng-app="mySuperApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>设置</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
      
    </head>
    <style >
        html{font-size: 20px}
        body{
        color: #6E6E6E;

        }
        .bar-positive{
             background-color: #07E9A1 !important;
        }
         .bar-title h4{
          /*  text-align: center;*/
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
            margin-bottom: 0;
        }
        .right{
            text-align: right;
        }
        .line{
            border:0;
            border-top: 1px solid #EEEEEE;
        }
        .col-name{
            line-height: 1.5rem
        }
         button.button-block, button.button-full, .button-full > button.button, input.button.button-block {
             width: 70%;   
        }
        .row .button {
            border-color: #50ECB7 !important;
            color: #50ECB7 !important;
            position: relative;
            margin: 0 auto;
            padding: 0 12px;
            min-width: 52px;
            min-height:30px;
            border-width: 1px;
            border-style: solid;
            border-radius: 1rem;
            vertical-align: top;
            text-align: center;
            text-overflow: ellipsis;
            font-size: 16px;
            line-height:40px;
        }
        .row-div-null{
            margin: 3rem 0;
        }
        .toggle.toggle-calm input:checked + .track {
             border-color: #07E9A1; 
             background-color: #07E9A1; 
        }
        .popup-head{
            background-color: #07E9A1;
           /* border-radius: 1rem 1rem 0 0;*/
        }
        .popup-head h3{
            color: #fff;
            font-size: 0.8rem;
        }
        .popup-body{
            background-color: #fff;
            text-align: center;
            color: #FFB37B;
            padding: 1rem 0 2rem  0;
            font-size: 0.8rem
        }
        .popup-buttons{
              background-color: #fff; 

        }
        .popup-buttons .button{
         /*   background-color: #07E9A1;*/
            color:#fff; 
            border-radius: 1rem 
        }
        .title  a{
          vertical-align: middle;
          float:left;
          margin-top: 1%;
        }
        /*弹出框*/
        .popup-container .popup{border-radius:16px;}
        .popup-head{
            background-color: #07E9A1;
            border-top-left-radius:16px;
            border-top-right-radius:16px;
            }
        .popup-title{font-size:14px;color:#fff;}
        .popup-body{
            background-color: #fff;
            text-align: center;
            color: #FF8B2E;
            padding: 1rem 0 2rem  0;
            font-size: 1rem;
            }
        .popup-buttons{
            margin-top: -10px;
            background:#fff;
            border-bottom-left-radius:16px;
            border-bottom-right-radius:16px;
            padding-left:30px;
            padding-right:30px;
            }
        .popup-buttons .button{
            background-color: #CDCDCD;
            color:#6A6A6A; 
            border-radius: 40px;
            margin-bottom: 10px;
            }
        
        
    </style>
    <body ng-controller="PopupCtrl">

     <ion-header-bar  class="bar-positive ">
             <h4 class="title">
                 
                      <a href="javascript:history.back(-1)" class="button button-icon icon ion-ios-arrow-back" nav-direction="back"></a>
                
              设置</h4>
     </ion-header-bar>

     <ion-content>
        <div class="row">
            <div class="col col-name">宠物医生</div>
            <div class="col right">
                 <label class="toggle toggle-calm">
                        <input type="checkbox" checked="">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                 </label>
            </div>
        </div>
        <div class="row line"></div>

         <div class="row">
            <div class="col col-name">报警</div>
            <div class="col right">
                 <label class="toggle toggle-calm">
                        <input type="checkbox" checked="">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                 </label>
            </div>
        </div>
        <div class="row line"></div>

         <div class="row">
            <div class="col col-name">自动投食</div>
            <div class="col right">
                 <label class="toggle toggle-calm">
                        <input type="checkbox" checked="">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                 </label>
            </div>
        </div>
        <div class="row line"></div>

         <div class="row">
            <div class="col col-name">清除缓存</div>
            <div class="col right col-name">
                 2.68M
            </div>
        </div>
        <div class="row line"></div>

         <div class="row">
            <div class="col col-name">关于我们</div>
            <div class="col right col-name">
               1.0 <i class="icon ion-chevron-right"></i>
            </div>
        </div>
        <div class="row line"></div>
        <div class="row row-div-null"></div>
        <div class="row btn-div-outline">
            <button class="button button-outline button-positive button-block" ng-click="showConfirm()">退出当前账号</button>    
        </div>       
     </ion-content>
    
  </body>
</html>
<script type="text/javascript">

        angular.module('mySuperApp', ['ionic'])
        .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
           //  confirm 对话框
           $scope.showConfirm = function() {
             var confirmPopup = $ionicPopup.confirm({
               title: '提示 <b>x</b>',

               template: '确定退出当前账号?',
                buttons: [
                   { text: '取消' },
                   {
                     text: '<b>确定</b>',
                     type: 'button-positive'   
                   },
                ]
             });
             confirmPopup.then(function(res) {
               if(res) {
                 console.log('You are sure');
               } else {
                 console.log('You are not sure');
               }
             });
             // 点击弹框外面和x隐藏弹框
              var htmlEl = angular.element(document.querySelector('html'));
              htmlEl.on('click', function (event) {
            　　if (event.target.nodeName === 'HTML' || event.target.nodeName === 'B') {
            　　　　if (confirmPopup) {//myPopup即为popup
            　　　　　　confirmPopup.close();
            　　　　}
            　　}
            });
           }; 
        });
      </script>
